{% extends "frontend/base.html" %}
{% load static %}

{% block content %}
  <div class="Middle Middle_top">
    <div class="Middle-top">
      <div class="wrap">
        <div class="Middle-header">
          <h1 class="Middle-title">Заказ №${orderId}$
          </h1>
          <ul class="breadcrumbs Middle-breadcrumbs">
            <li class="breadcrumbs-item"><a href="index.html">home</a>
            </li>
            <li class="breadcrumbs-item"><a href="historyorder.html">История заказов</a>
            </li>
            <li class="breadcrumbs-item breadcrumbs-item_current"><span>Заказ №${orderId}$</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="Section">
      <div class="wrap">
        <div class="Section-content">
          <div class="Orders">
          </div>
          <div class="Order">
            <div class="Order-infoBlock">
              <div class="Order-personal">
                <div class="row">
                  <div class="row-block">
                    <div class="Order-info Order-info_date">
                      <div class="Order-infoType">Дата заказа:</div>
                      <div class="Order-infoContent">${createdAt}$</div>
                    </div>
                    <div class="Order-info">
                      <div class="Order-infoType">ФИО:</div>
                      <div class="Order-infoContent">${fullName}$</div>
                    </div>
                    <div class="Order-info">
                      <div class="Order-infoType">Телефон:</div>
                      <div class="Order-infoContent">${phone}$</div>
                    </div>
                    <div class="Order-info">
                      <div class="Order-infoType">E-mail:</div>
                      <div class="Order-infoContent">${email}$</div>
                    </div>
                  </div>
                  <div class="row-block">
                    <div class="Order-info Order-info_delivery">
                      <div class="Order-infoType">Тип доставки:</div>
                      <div class="Order-infoContent">${deliveryType}$</div>
                    </div>
                    <div class="Order-info">
                      <div class="Order-infoType">Город:</div>
                      <div class="Order-infoContent">${city}$</div>
                    </div>
                    <div class="Order-info">
                      <div class="Order-infoType">Адрес:</div>
                      <div class="Order-infoContent">${address}$</div>
                    </div>
                    <div class="Order-info Order-info_pay">
                      <div class="Order-infoType">Оплата:</div>
                      <div class="Order-infoContent">${paymentType}$</div>
                    </div>
                    <div class="Order-info Order-info_status">
                      <div class="Order-infoType">Статус:</div>
                      <div class="Order-infoContent">${status}$</div>
                    </div>
                    <div v-if="paymentError !== null" class="Order-info Order-info_error">
                      <div class="Order-infoType">Оплата не прошла:</div>
                      <div class="Order-infoContent">${paymentError}$</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="Cart Cart_order">
                <div v-for="product in products" class="Cart-product">
                  <div class="Cart-block Cart-block_row">
                    <div class="Cart-block Cart-block_pict">
                      <a class="Cart-pict" href="#">
                        <img class="Cart-img" :src="product.image.src" :alt="product.image.alt"/>
                      </a>
                    </div>
                    <div class="Cart-block Cart-block_info">
                      <a class="Cart-title" href="#">${product.title}$</a>
                      <div class="Cart-desc">${product.shortDescription}$</div>
                    </div>
                    <div class="Cart-block Cart-block_price">
                      <div class="Cart-price">${product.price}$$</div>
                    </div>
                  </div>
                  <div class="Cart-block Cart-block_row">
                    <div class="Cart-block Cart-block_amount">${product.count}$ шт.</div>
                  </div>
                </div>
                <div class="Cart-total">
                  <div class="Cart-block Cart-block_total">
                    <strong class="Cart-title">Итого:<span class="Cart-price">${totalCost}$$</span>
                    </strong>
                  </div>
                  <div class="Cart-block"><a class="btn btn_primary btn_lg" href="#">Оплатить</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block mixins %}
<script>var pk = {{pk}}</script>
<script src="{% static 'frontend/assets/js/order-detail.js' %}"></script>
{% endblock %}